<template>
  <div>
    <div class="layui-fluid" style="padding: 0px">
      <div class="layui-row" style="background-color: #CD6090;height: 300px">
        <div class="layui-col-lg5 layui-col-lg-offset2">
          <div class="layui-row" style="margin-top: 20px">
            <div class="layui-col-lg4">
              <div style="border:3px #FFFFE0 solid">
                <img :src="getImages(movieInfo.images.large)" alt="" style="width: 100%;height: 300px">
              </div>
            </div>
            <div class="layui-col-lg6 layui-col-lg-offset1">
              <div>
                <div>
                  <h1 style="color: #FBFBFB;font-weight: bold">{{movieInfo.original_title}}</h1>
                </div>
                <div style="margin-top: 20px">
                  <h6 style="color: #FBFBFB">{{genres}}</h6>
                </div>
                <div style="margin-top: 10px">
                  <h6 style="color: #FBFBFB">{{movieInfo.countries[0]}}/{{movieInfo.durations[0]}}</h6>
                </div>
                <div style="margin-top: 10px">
                  <h6 style="color: #FBFBFB">{{movieInfo.mainland_pubdate}}大陆上映</h6>
                </div>
                <div style="margin-top: 50px">
                  <button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger" type="button"
                          @click="buyMovieTicket">购买
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-lg2">
          <div style="margin-top: 180px">
            <h6 style="color: #FBFBFB">用户评分</h6>
          </div>
          <div class="layui-row">
            <div class="layui-col-lg3">
              <h1 style="color: #EEC900" v-if="userComment.length!=0">{{movieAveragePoint}}</h1>
              <h6 style="color: #EEC900" v-else-if="userComment.length==0">暂无评分</h6>
            </div>
            <div class="layui-col-lg6">
              <div>
                <h6 style="color: #FBFBFB">{{userComment.length}}人评分</h6>
              </div>
            </div>
          </div>
          <div style="margin-top: 10px">
            <el-rate
              v-model="value"
              disabled
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-container" style="margin-top: 50px">
      <div class="layui-row">
        <div class="layui-col-lg6">
          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
              <li class="layui-this">介绍</li>
              <li>演员</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <div>
                  <span style="color: #EE5C42;font-size: 20px">|</span>&nbsp;&nbsp;<span>剧情介绍</span>
                </div>
                <div style="margin-top: 10px">
                  <span>{{movieInfo.summary}}</span>
                </div>
                <div style="margin-top: 20px">
                  <span style="color: #EE5C42;font-size: 20px">|</span>&nbsp;&nbsp;<span>图集</span>
                </div>
                <div style="margin-top: 10px">
                  <viewer>
                    <img :src="getImages(item.image)" alt="" class="moviePictrue" v-for="(item,idx) in movieInfo.photos"
                         :key="idx">
                  </viewer>
                </div>
                <div style="margin-top: 20px">
                  <div>
                    <span style="color: #EE5C42;font-size: 20px">|</span>&nbsp;&nbsp;<span>学生评论</span>
                  </div>
                  <div style="margin-top: 10px" v-if="userComment.length!=0">
                    <div style="border-bottom: 1px #E5E5E5 solid" v-for="(item,idx) in userCommentPagePaging"
                         :key="idx">
                      <div class="layui-row">
                        <div class="layui-col-lg1">
                          <div
                            style="height: 40px;width: 40px;border-radius: 20px;border: 1px red solid;overflow: hidden">
                            <img :src="item.head_portrait" alt="" style="height: 100%;width: 100%">
                          </div>
                        </div>
                        <div class="layui-col-lg3">
                          <div>{{getUserName(item.telphone)}}</div>
                          <div>
                            <el-rate :value="item.movie_grade" disabled></el-rate>
                          </div>
                        </div>
                      </div>
                      <div class="layui-row">
                        <div class="layui-col-lg10 layui-col-lg-offset1">
                          {{item.comment_content}}
                        </div>
                      </div>
                    </div>
                    <div class="layui-row">
                      <div class="layui-col-lg6">
                        <el-pagination
                          background
                          layout="prev, pager, next" :page-size="pageSize" @current-change="currentChange"
                          @prev-click="prevClick" @next-click="nextClick" :current-page="currentPage"
                          :total="userComment.length">
                        </el-pagination>
                      </div>
                    </div>
                  </div>
                  <div style="margin-top: 10px" v-if="userComment.length==0">
                    <div style="border-bottom: 1px #E5E5E5 solid">
                      <div class="layui-row" style="text-align: center">
                        <h1>暂无评论</h1>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-tab-item">
                <div style="margin-top: 20px">
                  <span style="color: #EE5C42;font-size: 20px">|</span>&nbsp;&nbsp;<span>演员</span>
                </div>
                <div style="margin-top: 10px">
                  <viewer>
                    <div style="text-align: center;width:100px;height: 100px;float: left;margin: 5px"
                         v-for="(item,idx) in movieInfo.casts" :key="idx">
                      <img :src="getImages(item.avatars.large)" style="display: block;width: 100%;height: 100%">
                      <span>{{item.name}}</span>
                    </div>
                  </viewer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-lg6">
          <button @click="test">测试</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "movie_detail",
        data() {
            return {
                movieInfo: "",
                userComment: [],
                value: 0,
                pageSize: 5,
                currentPage: 1,
                userCommentPagePaging: []
            }
        },
        methods: {
            getImages(_url) {
                if (_url !== undefined) {
                    let _u = _url.substring(7);
                    return 'https://images.weserv.nl/?url=' + _u;
                }
            },
            test() {
                console.log(this.movieInfo)
            },
            getUserCommentPc() {
                this.$axios.get('/api/tato/getUserCommentPc', {
                    params: {
                        doubanId: this.movieInfo.id
                    }
                }).then((res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        this.userComment.push(res.data[i])
                    }
                    this.getUserCommentPagePaging()
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getUserCommentPagePaging() {
                this.userCommentPagePaging = []
                let start = (this.currentPage - 1) * this.pageSize
                for (let i = start; i < start + this.pageSize; i++) {
                    if (this.userComment[i] == undefined) {
                        break;
                    } else {
                        this.userCommentPagePaging.push(this.userComment[i])
                    }
                }
            },
            currentChange(e) {
                this.currentPage = e
                this.getUserCommentPagePaging()
            },
            prevClick() {
                this.currentPage--
                this.getUserCommentPagePaging()
            },
            nextClick() {
                this.currentPage++
                this.getUserCommentPagePaging()
            },
            buyMovieTicket() {
                let user = sessionStorage.getItem("generalUser")
                if (user != null) {
                    //前往买票界面
                    sessionStorage.setItem("selectDoubanId", this.movieInfo.id)
                    sessionStorage.setItem("selectMovieName", this.movieInfo.original_title)
                    this.$router.push({
                        name: "buy_movie_ticket_page"
                    })
                } else {
                    //打开询问是否登录
                    this.$confirm('此操作需要登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        this.$router.push({
                            name: "login_register_page"
                        })
                    }).catch(() => {

                    });
                }
            },
            getUserName(date) {
                let temp = date.split('');
                temp.splice(4, 4, '****')
                let result = temp.join('')
                return result
            }
        },
        created() {
            layui.use('element', function () {
                var element = layui.element;
            });
            this.movieInfo = JSON.parse(sessionStorage.getItem("movieInfo"))
            this.getUserCommentPc()
        },
        computed: {
            genres() {
                let len = this.movieInfo.genres.length
                let temp = this.movieInfo.genres
                let result = ""
                for (let i = 0; i < len; i++) {
                    if (i != len - 1) {
                        result += temp[i] + ","
                    } else {
                        result += temp[i]
                    }
                }
                return result
            },
            movieAveragePoint() {
                let len = this.userComment.length
                let totalPoint = 0
                for (let i = 0; i < len; i++) {
                    totalPoint += this.userComment[i].movie_grade
                }
                this.value = Number((totalPoint / len).toFixed(1))
                return this.value
            }
        }
    }
</script>

<style scoped>
  .moviePictrue {
    width: 100px;
    height: 100px;
    margin: 5px;
  }
</style>
